<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>   
<%@ taglib prefix="elfunc" uri="/WEB-INF/tlds/el-functions.tld" %>
	<c:if test="${session.userId != null}">
		<c:url value="member_update.action" var="URL"/>
		<c:set value="수정" var="btn" />	
		<c:set value="u" var="mode"/>			
	</c:if>
	<c:if test="${session.userId == null }">
		<c:url value="member_insert.action" var="URL"/>	
		<c:set value="확인" var="btn" />	
		<c:set value="c" var="mode"/>
	</c:if>	
	
	<link href="/ssol2/common/css/member.css" type="text/css" rel="stylesheet">
	<style type="text/css">
	.str_o{
		color:red;
	}
	.str_o{
		color:blue;
	}
	</style>
	<script type="text/javascript">
	/*--------------------------------------------------------------
	기          능 : jQuery validate()를 이용한 회원가입을 위한 폼 유효성검정루틴
	제          작 : 송준철 
	작성날짜 : 2012.03.08 
	----------------------------------------------------------------*/
	//validate()function은 submit button을 click 하면 실행됩니다. 
	var mode = "${mode}"
	
	$(function(){
		if(mode = "u"){
			$("#name, input[name='userid']").attr({disabled:true});			
			$("[name=check]").val(1);
		}
		$("#member_joinform").validate({
			rules:{
				name: {
					required : true,
					minlength : 2 
				},
				userid:{
					required : true,
					minlength : 3
				},				
				passwd:{
					required : true,
					minlength: 8
				},
				confirm_passwd:{
					required : true,
					minlength : 8,
					equalTo: "#passwd"				
				},
				
				zipcode:{
					required : true,
					number : true, 
					minlength : 6
				},  
					
				addr1:"required",
				addr2:"required",
				hp: { 
					required : true, 
					number : true
				},
				
 				email:{
					required : true,
					email : true
				},								
			},
			messages:{
				name: {
					required : "이름을 입력해주세요", 
					minlength : "2자 이상 입력해주세요"
				},
				userid:{
					required : "아이디를 입력해주세요",
					minlength : "최소 3자 이상 입력해주세요"
				},
				passwd:{
					required : "암호를 입력해주세요",
					minlength: "최소8자 이상을 입력하세요"
				},
				confirm_passwd:{
					required : "암호를 한 번 더 입력해주세요",
					minlength : "최소 8자 이상을 입력해주세요",
					equalto: "암호가 일치하지 않습니다."				
				},
				
				zipcode:{
					required : "우편번호를 입력해주세요",
					minlength : "-(하이픈)빼고 정확한 번호를 입력하세요.",
					number : "숫자로 입력하세요" 
				},  
					
				addr1: "시,군,구 주소를 입력하세요.",
				addr2:"나머지 주소를 입력하세요",
				hp: { 
					required : "-(하이픈)빼고 휴대폰 번호를 입력하세요.", 
					number : "숫자로 입력해주세요"
				},
				
 				email:{
					required : "이메일을 입력해주세요",
					email : "형식에 맞는 이메일을 입력해주세요"
				},					
			},
			submitHandler: function(form) {
				if($("[name=check]").val() != 1){
					return;
				}
				form.submit();
			}
			
			
		});	
		$("[name='userid']").keyup(function(){
			if($.trim($(this).val()) != "" ){
				$.ajax({
				url : "userid_confrim.action",
				async : false,
				type : "post",
				data : "userid="+$("[name='userid']").val(),  
				success : function(res){
					data = eval("("+res+")");
					/* console.log(data.userid);
					console.log(data.check); */
						if (data.check == 1) {
	                        $('#userid').html('<span class="str_o">' + data.userid + ' 은(는) 사용 가능합니다.</span>');
	                 		$("[name='check']").val(1);       
	                    } 
	                    else if(data.check == 0)  {
	                        $('#userid').html('<span class="str_x">' + data.userid + ' 은(는) 이미 사용중인 아이디 입니다.</span>');
	                        $("[name='check']").val('');
	                    }
	                    
				 },
				  error:function(){
					  alert('오류발생');
				  }
				});
			}else{
            	$('#userid').html("");
            }
		});
		
	});
	</script>
	<div class="con">
	<form id="member_joinform" method="post" action="${URL}">
	<input type="hidden" name="check"/>
	<fieldset>
	<legend><strong><strong>회원가입</strong></legend>
	<table align="center" width="965" cellspacing="1" cellpadding="1">
	  <tr>
	    <td align="left" style="width: 120px";><label for="name"><strong>이름</strong></label></td>
	    <td><input type="text" name="name" id="name" value="${memberInfo.name}" /></td>
	  </tr>	  
	  <tr>
	    <td align="left" style="width: 120px";><label for="name"><strong>아이디</strong></label></td>
	    <td><input type="text" name="userid" value="${memberInfo.userid}"/><span id="userid"></span></td>
	  </tr>
	  <tr>
		<td>
	    	<label for="password"><strong>비밀번호</strong></label>
	   	</td>
	    <td>
	   		<input type="password" name="passwd" id="passwd" />
	   	</td>
	   <tr>
	   		<td><strong>비밀번호확인</strong></td>
			 <td><input type="password" name="confirm_passwd" id="confirm_passwd" /></td>
	   </tr>  
	   <tr>
	    	<td><label for="zipcode"><strong>우편번호</strong></label></td>
		    <td><input type="text" name="zipcode" id="zipcode" value="${memberInfo.zipcode}"/></td>
	   </tr>
	   <tr>
	    	<td><label for="addr1"><strong>주소</strong></label></td>
	    	<td><input type="text" name="addr1" id="addr1" value="${memberInfo.addr1}"/></td>
	    <tr>
	    	<td><label for="addr2"></label></td>
	    	<td><input type="text" name="addr2" id="addr2" value="${memberInfo.addr2}"/></td>
	    </tr>
	     
	  <tr>
	  	  <td><strong>집전화</strong></td>
	    	<td><input name="tel" type="text" id="tel" value="${memberInfo.tel}" /></td>
	  </tr>
	  <tr>
	       <td><strong>휴대폰</strong></td>  
	   	   <td><input name="hp" type="text" id="hp" value="${memberInfo.hp}" /></td>
	  </tr> 
	  <tr>
	  	  <td><strong>전자우편</strong></td>
	      <td><input name="email" type="text" id="email" value="${memberInfo.email}" class="required email" /></td>
	  </tr>
	  
	  <tr>
	    <td colspan="2" style="padding-left: 100px; padding-top: 10px";>
	    	<input type="submit" class="button" value="${btn}" />
	     	<input type="reset" class="button" value="취소" />
	    </td>
	  </tr>
	</table>
	
	</fieldset>
	</form>
	</div>